import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, FlatList } from "react-native";
import { statusBarHeight } from "../../util/apdater_util";
import PropTypes from "prop-types";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import JobTypeList from "./JobTypeList";

class MyJobHeaderView extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    activeTab: PropTypes.number,
    onPress:PropTypes.func,
    backFun:PropTypes.func
  }
  // 默认
  static defaultProps = {
    activeTab:1,
    backFun:()=>{},
    onPress:()=>{}
  }

  tabChange(index){
    this.props.onPress(index)
  }

  render() {
    return (
      <View style={styles.header}>
        <View style={{flex:1}}>
          <TouchableWithoutFeedback onPress={this.props.backFun}>
            <View style={{width:40,height:44,alignItems:'center',justifyContent:'center'}}>
              <Image style={{width:8,height:15}} source={require('../../img/icon_back_black.png')}></Image>
            </View>
          </TouchableWithoutFeedback>
        </View>
        <View style={{flex:2,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
          <TouchableWithoutFeedback onPress={()=>{this.tabChange(1)}}>
            <View style={styles.tab}>
              <Text style={[styles.tabTitle,this.props.activeTab==1?styles.activeTab:null]}>我发布的</Text>
              {this.props.activeTab==1?<Image style={styles.lineBar} source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback onPress={()=>{this.tabChange(2)}}>
            <View style={styles.tab}>
              <Text style={[styles.tabTitle,this.props.activeTab==2?styles.activeTab:null]}>我参与的</Text>
              {this.props.activeTab==2?<Image style={styles.lineBar} source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        </View>
        <View style={{flex:1}}></View>
        <View style={styles.bottomLine}></View>
      </View>
    )
  }
}

class MyJobCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.subTabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.subTabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.subTabBox}>
              <Text style={[styles.subTab,i === this.props.activeTab?{fontSize:14,color:'#E39354'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
            </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}

export default class MyJobList extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.pages={
      page1:null,
      page2:null,
      page3:null,
      page4:null,
      page5:null
    }
    this.state={
      activeTab:1,
      tabList:[{
        label:'全部',
        index:1
      },{
        label:'征稿中',
        index:2
      },{
        label:'选稿中',
        index:3
      },{
        label:'公示中',
        index:4
      },{
        label:'已结束',
        index:5
      }]
    }
  }

  back(){
    this.props.navigation.pop()
  }

  /*发布，参与*/
  workTypeChange(index){
    console.log(index)
    this.setState({activeTab:index})
    if(this.tabView)this.tabView.goToPage(0)
    for(let key in this.pages){
      let page=this.pages[key]
      if(page&&page.reload){
        page.reload(index)
      }
    }
  }

  onChangeTab(obj){

  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)
  }

  render() {
    return(
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <MyJobHeaderView activeTab={this.state.activeTab} backFun={this.back.bind(this)} onPress={(index)=>{this.workTypeChange(index)}}></MyJobHeaderView>
        <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
          <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
            (position) => {
            }
          } locked={false} renderTabBar={()=><MyJobCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
            <View tabLabel='Tab1' style={{flex: 1}}>
              <JobTypeList ref={(ref)=>this.pages.page1=ref} type={this.state.activeTab} status={0}></JobTypeList>
            </View>
            <View tabLabel='Tab2' style={{flex: 1}}>
              <JobTypeList ref={(ref)=>this.pages.page2=ref} type={this.state.activeTab} status={1}></JobTypeList>
            </View>
            <View tabLabel='Tab3' style={{flex: 1}}>
              <JobTypeList ref={(ref)=>this.pages.page3=ref} type={this.state.activeTab} status={2}></JobTypeList>
            </View>
            <View tabLabel='Tab4' style={{flex: 1}}>
              <JobTypeList ref={(ref)=>this.pages.page4=ref} type={this.state.activeTab} status={3}></JobTypeList>
            </View>
            <View tabLabel='Tab5' style={{flex: 1}}>
              <JobTypeList ref={(ref)=>this.pages.page5=ref} type={this.state.activeTab} status={4}></JobTypeList>
            </View>
          </ScrollableTabView>
        </View>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  header:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    backgroundColor:'#fff',
    height:statusBarHeight+44,
    paddingTop:statusBarHeight,
  },
  tabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center'
  },
  tab:{
    paddingLeft: 20,
    paddingRight:20,
    height:44,
    justifyContent:'center',
    alignItems:'center'
  },
  tabTitle:{
    color: '#666666',
    fontSize: 16,
  },
  activeTab:{
    color: '#222222',
    fontSize: 19,
    fontWeight:'600'
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:4,
  },

  bottomLine:{
    position: 'absolute',
    left:0,
    right:0,
    bottom:0,
    height:1,
    backgroundColor:'#F6F6F6'
  },

  /**tab**/
  subTabs:{
    height:40,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
  },
  subTabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center'
  },
  subTab:{
    color: '#959595',
    fontSize: 14,
    paddingLeft: 10,
    paddingRight:10
  },

  cell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingHorizontal:14,
    paddingVertical:22,
    backgroundColor:'#fff'
  },
  logo:{
    width: 49,
    height:49,
    borderRadius:7
  },
  workInfo:{
    marginLeft: 12,
    flex:1
  },
  titleBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  flexBox:{
    flexDirection:'row',
    justifyContent:'flex-start',
  },
  hot:{
    width:16,
    height:16,
    marginRight:5
  },
  title:{
    color:'#0F0F0F',
    fontSize: 15,
    fontWeight:'500'
  },
  score:{
    color:'#E39354',
    fontSize:15,
    fontWeight: '500'
  },
  tags:{
    flexDirection:'row',
    marginTop: 8,
    justifyContent:'flex-start',
    flexWrap:'wrap',
    width:'100%',
  },
  tag:{
    backgroundColor:'#F6F6F6',
    color:'#3F3F3F',
    fontSize:11,
    height:19,
    lineHeight: 19,
    textAlign: 'center',
    paddingHorizontal:5,
    borderRadius:3,
    marginRight:4,
    marginBottom:5
  },
  des:{
    color:'#3F3F3F',
    fontSize:11,
    marginTop: 17
  },
  menu:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:50,
    borderTopWidth:1,
    borderTopStyle:'solid',
    borderTopColor:'#F6F6F6',
    marginTop:15
  },
  menuItem:{
    flex:1,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  menuIcon:{
    width:18,
    height:18,
    marginRight:8
  },
})
